export default {
    directives: {
        drag: {
            inserted: function (el) {
                let dragBox = el;
                dragBox.onmousedown = e => {
                    //算出鼠标相对元素的位置
                    let disX = e.clientX - dragBox.offsetLeft;
                    let disY = e.clientY - dragBox.offsetTop;
                    let elementWidth = dragBox.clientWidth
                    let elementHeight = dragBox.clientHeight
                    let winWidth = window.innerWidth
                    let winHeight = window.innerHeight
                    document.body.onmousemove = e => {
                        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                        let left = e.clientX - disX;
                        let top = e.clientY - disY;
                        //移动当前元素
                        left = left < 0 ? 0 : (left + elementWidth > winWidth ? winWidth - elementWidth : left)
                        top = top < 0 ? 0 : (top + elementHeight > winHeight ? winHeight - elementHeight : top)
                        dragBox.style.left = left + "px";
                        dragBox.style.top = top + "px";
                    };
                    document.body.onmouseup = e => {
                        //鼠标弹起来的时候不再移动
                        document.body.onmousemove = null;
                        //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
                        document.body.onmouseup = null;
                    };
                };
            }
        }
    }
}